<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>账务统计 - 按类型</title></head>
<body>
<div id="account_statistics_type_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse" data-transition="slide">主页</a>

        <h1>账务统计 - 按类型</h1>
        <a href="chart/type" data-icon="grid" data-transition="slide">图表</a>
    </div>
    <div data-role="content">
        <div class="center font-16">
            共<strong class="color-s">${typeStatisticsDTO.totalSize}</strong>条统计记录
        </div>
        <ul data-role="listview" data-inset="true" data-count-theme="b" id="listview_">
            <c:forEach items="${typeStatisticsDTO.list}" var="s">
                <li data-theme="${s.style.label}">
                    <a href="show_details?type=ACCOUNT_TYPE&value=${s.guid}" data-transition="slide"><img
                            src="${contextPath}/images/mobile/${s.daily?"d.gif":"n.gif"}" alt=""
                            class="ui-li-icon"/>${s.defaultType?'':'&gt;&nbsp;'}${s.name}<span
                            class="ui-li-count">${s.amount}</span></a>
                </li>
            </c:forEach>
        </ul>
        <c:if test="${typeStatisticsDTO.showMore}">
            <div data-role="controlgroup" id="daily_more_div">
                <a href="javascript:void(0);" id="daily_more_link" data-role="button" class="color-b">
                    更多 (<span
                        id="page_number">${typeStatisticsDTO.pageNumber}</span>/${typeStatisticsDTO.totalPages})<img
                        id="more_loading" src="${contextPath}/images/public/load.gif" alt="loading" class="more-img"/>
                </a>
            </div>
        </c:if>
    </div>
    <div data-role="footer" data-position="fixed" data-theme="c">
        <div data-role="navbar">
            <ul>
                <li>
                    <a href="javascript:void(0);" data-icon="arrow-l" data-rel="back">返回</a>
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        var pageNumber = ${typeStatisticsDTO.pageNumber};
        var totalSize = ${typeStatisticsDTO.totalSize};

        $("a#daily_more_link").bind("click", function() {
            var $this = $(this).addClass("gray");
            var nextPageNumber = (++pageNumber);
            var loading = $("#more_loading").show();
            getData();
            function getData() {
                $.ajax({
                    url:"type/more",
                    data:{
                        pageNumber: nextPageNumber,
                        totalSize: totalSize
                    },
                    success:function(data) {
                        var listview = $("#listview_").append($.trim(data)).listview("refresh");
                        $this.removeClass("gray");
                        checkShowMore(listview);
                    }
                });
            }

            function checkShowMore(listview) {
                var addedSize = listview.find("li").size();
                if (addedSize == totalSize) {
                    $("#daily_more_div").hide();
                } else {
                    loading.hide();
                }
                $this.find("#page_number").html(nextPageNumber);
            }
        });
    </script>
</div>
</body>
</html>